<template>
  <div>
      <!-- 顶部 -->
    <div class="header">
        
      <!-- 头部紫色背景 -->
      <div class="header_bg">
          <!-- 返回箭头 -->
        <div class="out" @click="logout">&lt;</div>
      </div>
      <!-- 信息卡片 -->
      <div class="header_card">
        <div class="user_img">
          <img
            :src="userData.userFace"
            alt=""
            style="
              display: block;
              height: 100%;
              width: 100%;
              border-radius: 50%;
            "
          />
        </div>
        <div class="user_name">{{ userData.username }}</div>
        <div class="user_slogan">可可喜欢家，家喜欢干净</div>
        <div class="user_status">{{ userData.certificationStatus }}</div>
      </div>
    </div>
    <!-- 个人信息展示 -->
    <div class="content">
        <van-cell title="手机号" :value="userData.telephone" />
        <van-cell title="身份证号" :value="userData.idCard" />
        <van-cell title="银行卡号" :value="userData.bankCard" />
        <van-cell title="身份证正面照:" value="" />
        <img :src="userData.idcardPhotoNegative" alt="">
        <van-cell title="身份证背面照:" value="" />
        <img :src="userData.idcardPhotoPositive" alt="">
        <van-cell title="银行卡照片:" value="" />
        <img :src="userData.bankCardPhoto" alt="">
        
    </div>
  </div>
</template>

<script>
import { post, get } from "@/http/axios";
export default {
  data() {
    return {
      //用户列表
      userData: {},
    };
  },
  methods: {
    async getUserData() {
      var token = localStorage.getItem("token");
      let res = await get("/user/info", { token });
      this.userData = res.data.data;
      
    },
    logout(){
        this.$router.go(-1)
    }
  },
  created() {
    this.getUserData();
  },
};
</script>

<style lang="scss" scoped>

.header_bg {
  height: 180px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  padding: 15px 0 0 20px;
  .out{
      color: #fff;
      font-size: 24px;
  }
}
.header_card {
  width: 80%;
  height: 170px;
  background-color: #fff;
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  box-shadow: 0 0 10px #ccc;
  border-radius: 8px;
  padding: 0 1em;
  .user_img {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background-color: #bf73ff;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .user_name {
    width: 50%;
    margin: 0 auto;
    margin-top: 3.5em;
    text-align: center;
  }
  .user_slogan {
    color: #7579ff;
    width: 50%;
    margin: 0 auto;
    margin-top: 0.5em;
    text-align: center;
    font-size: 12px;
  }
  .user_status {
    width: 50%;
    margin: 0 auto;
    margin-top: 1em;
    text-align: center;
    font-size: 12px;
    color: #999;
  }
  .flex {
    display: flex;
    justify-content: space-around;
    margin-top: 1em;
    .flex_item {
      width: 24%;
      height: 40px;
      text-align: center;
      cursor: pointer;
      .item_head {
        font-size: 11px;
        color: #999;
      }
      .item_content {
        font-size: 22px;
        margin-top: 2px;
        color: #7579ff;
      }
    }
  }
}
.content{
    margin-top: 115px;
    padding: 0 10px;
    img{
        display: block;
        width:80%;
        margin:0 auto;
        
    }
}
</style>